<template>
  <form @submit.prevent="register" class="zhucelist">
    <h2>用户注册</h2>
    <div>
      <label>用户名：</label>
      <input
        type="text"
        v-model="registerusername"
        placeholder="用户名"
      /><br />
      <label>密码：</label>
      <input type="password" v-model="registerpassword" placeholder="密码" />
    </div>
    <button type="submit" class="registrationpage">注册</button>
  </form>
  <!-- <div class="listli">
    <h3>注册列表</h3>
    <common-list :items="users" />
    <h2>API请求示例</h2>
    <button @click="fetchDate">获取数据</button>
    <div>{{ apiData }}</div>
  </div> -->
</template>

<script setup>
import { ref } from "vue";
import commonList from "common-list";
import useApi from "./useApi";

const registerusername = ref("");
const registerpassword = ref("");
const users = ref([]);
const apiData = ref("");

const register = () => {
  const newUser = {
    registerusername: registerusername.value,
    registerpassword: registerpassword.value,
  };
  users.value.push(newUser);
  registerusername.value = "";
  registerpassword.value = "";
};
const fetchDate = async () => {
  apiData.value = "模拟的API响应数据";
};
</script>
<style>
.zhucelist {
  text-align: center;
  align-items: center;
  position: absolute;
  top: 120px;
  left: 60px;
}
label {
  float: left;
}
input {
  float: right;
}
.registrationpage {
  margin-top: 10px;
  margin-left: 20px;
}
h3 {
  text-align: left;
}
.listli {
  text-align: center;
  align-items: center;
  position: absolute;
  top: 270px;
  left: 60px;
}
</style>
